<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>可见性过滤选择器</title>
    <style type="text/css">
        #txt_show {
            display: none;
            color: #00C;
        }

        #txt_hide {
            display: block;
            color: #F30;
        }
    </style>
</head>

<body>
    <p id="txt_hide">单击按钮，我会被隐藏哦~</p>
    <p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p>
    <input name="show" type="button" value="显示隐藏的P元素" id="show" />
    <input name="hide" type="button" value="隐藏显示的P元素" id="hide" />
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // 可见,visible,所有的
        // 隐藏，hidden，所有的
        $("#show").click(function () {
            $("p:hidden").show()
        })

        $("#hide").click(function () {
            $("p:visible").hide()
        })


        // 注意事项：
        // 特殊元素，id="id#a"   id=id[2]
        //    转义字符   $("#id\\#a")    $("#id\\[2\\]")
        // 含空格字符

    </script>


    <div class="test">
        <div class="a " style="display: none;">111111</div>
        <div class="a" style="display: none;">111111</div>

    </div>
    <script>
        $(".a :hidden").css("background","#ccc")
        $(".a:hidden").css("background","#ccc")

    </script>

</body>

</html>